<template>
    <div>

        <div class="container" style="width: 95%">
            <div>
                <el-button type="primary" class="btn-base" icon="el-icon-setting" @click="setSalary">设置薪资</el-button>
            </div>
        <el-table

                :data="tableData.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase()))"
                tooltip-effect="dark"
                style="width: 100%"
               >
<!--            <el-table-column-->
<!--                    type="selection"-->
<!--                    width="55">-->
<!--            </el-table-column>-->
            <el-table-column
                    label="月份"
                    prop="time1"
                    width="150">
                <template slot-scope="scope">{{ scope.row.time1 }}</template>
            </el-table-column>
            <el-table-column
                    prop="userName"
                    label="姓名"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="serve"
                    label="职位"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="genderInfo"
                    label="性别"
                    width="100">
            </el-table-column>
            <el-table-column
                prop="tel"
                label="联系电话"
                width="150">
            </el-table-column>
            <el-table-column
                prop="registTimes"
                label="到岗天数"
                width="100">
            </el-table-column>
            <el-table-column
                    prop="leaveTimes"
                    label="请假天数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="pay"
                    label="薪资(元)"
                    width="100">
            </el-table-column>
            <el-table-column label="操作" width="250">
                <template slot="header" slot-scope="scope">
                    <el-input
                            v-model="search"
                            size="mini"
                            placeholder="输入关键字搜索"/>
                </template>
                <template slot-scope="scope">
                    <el-button
                            type="success"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)" icon="el-icon-notebook-2">查看详细</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="settle2(scope.$index, scope.row)" icon="el-icon-coin" :disabled="scope.row.pay===0">结算</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
        <!--       //编辑用户弹窗-->
        <el-dialog title="查看用户薪资信息" :visible.sync="dialogFormVisible" >
            <el-form :model="form">
                <table>

                    <tr>
                        <td>
                            <el-form-item label="姓名" :label-width="formLabelWidth">
                                <el-input v-model="form.userName" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="性别" :label-width="formLabelWidth">
                                <el-input v-model="form.genderInfo" autocomplete="off" width="60%" disabled="disabled"></el-input>
<!--                                <el-select v-model="form.genderInfo" placeholder="请选择" >-->
<!--                                    <el-option-->
<!--                                            v-for="item in options"-->
<!--                                            :key="item.value"-->
<!--                                            :label="item.label"-->
<!--                                            :value="item.value">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="身份证号" :label-width="formLabelWidth">
                                <el-input v-model="form.identityCardNumber" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>

                        </td>
                        <td>
                            <el-form-item label="联系电话" :label-width="formLabelWidth">
                                <el-input v-model="form.tel" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="当月签到次数" :label-width="formLabelWidth">
                                <el-input v-model="form.registTimes" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>

                        </td>
                        <td>
                            <el-form-item label="当月请假次数" :label-width="formLabelWidth">
                                <el-input v-model="form.leaveTimes" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="任职" :label-width="formLabelWidth">
                                <el-input v-model="form.serve" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="薪资(元)" :label-width="formLabelWidth">
                                <el-input v-model="form.pay" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="工号" :label-width="formLabelWidth">
                                <el-input v-model="form.jobNumber" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="账户" :label-width="formLabelWidth">
                                <el-input v-model="form.userAccount" autocomplete="off" width="60%" disabled="disabled"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                </table>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="settle" :disabled="form.pay===0">结算</el-button>
            </div>
        </el-dialog>
<!--        //设置基本工资对话框-->
        <el-dialog
                title="设置薪资"
                :visible.sync="dialogVisible"
                width="35%"
                :before-close="handleClose">

            <el-form>
                    <el-table
                            :data="salaryData"
                            style="width: 100%"
                            text-align="center">
                        <el-table-column
                                label="职务"
                                width="150">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.postType }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="基本工资(元)"
                                width="150">
                            <template slot-scope="scope">
                                <span style="margin-left: 10px">{{ scope.row.baseSalary }}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                label="奖金(元)"
                                width="100">
                            <template slot-scope="scope">
                                <el-popover trigger="hover" placement="top">
                                    <p>签到16天可享受奖金，达26天可享受全额奖金</p>
                                    <div slot="reference" class="name-wrapper">
                                        <el-tag size="medium">{{ scope.row.bonus }}</el-tag>
                                    </div>
                                </el-popover>
                            </template>
                        </el-table-column>
                        <el-table-column label="操作">
                            <template slot-scope="scope">
                                <el-button
                                        size="mini"
                                        type="success"
                                        @click="setSalaryFn(scope.$index, scope.row)">调整</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible = false">关闭</el-button>
          </span>
            <el-dialog
                    width="30%"
                    title="调整薪资"
                    :model="form1"
                    :visible.sync="innerVisible"
                    append-to-body>
                <el-form>
                    <el-form-item label="职位" width="20%">
                        <el-input v-model="form1.postType" disabled="disabled" ></el-input>
                    </el-form-item>
                    <el-form-item label="基本工资(元)">
                        <el-input v-model="form1.baseSalary"></el-input>
                    </el-form-item>
                    <el-form-item label="奖金(元)">
                        <el-input v-model="form1.bonus"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="innerVisible = false">取 消</el-button>
                    <el-button type="primary" @click=" adjustSalary">确 定</el-button>
                </span>
            </el-dialog>
        </el-dialog>
    </div>
</template>

<script>
    import {
        requestGetAllPostInfo,
        requestGetAllUserInfoByMark,
        requestGetLeaveTimes,
        requestGetRegistTimes,
        requestGetSalaryByPostType,
        requestSettlePay,
        requestUpdatePayById,
        requestUpdatePostTypeInfo
    } from '../../../../api';

    export default {
        name: 'Salary',
        data(){
            return {
                options:[],
                formLabelWidth:'120px',
                dialogFormVisible:false,
                form1:'',
                innerVisible:false,
                selectedPost:'',
                salaryData:[],
                dialogVisible:false,
                search:'',
                tableData: [],
                form:'',
            }
        },
        created(){
            this.getAllInfo()
        },
        methods:{
            async settle2(index,row){
                let json ={id:this.tableData[index].id}
                const res = await requestSettlePay(json).catch(()=>"error")
                if(res!=="error"){
                    console.log(res)
                    this.$message({
                        message: '薪资结算成功',
                        type: 'success'
                    });
                    this.getAllInfo()
                }
            },
            //结算
            async settle(){
                this.dialogFormVisible = false
               //没有银行结算接口，就省略真实过程
               let json={
                   id:this.form.id
               }
               const res = await requestSettlePay(json).catch(()=>"error")
                if(res!=="error"){
                    console.log(res)
                    this.$message({
                        message: '薪资结算成功',
                        type: 'success'
                    });
                    this.getAllInfo()
                }
            },
            //保存薪资调整
            async adjustSalary(){
                let json ={
                    postType:this.form1.postType,
                    baseSalary:this.form1.baseSalary,
                    bonus:this.form1.bonus
                }
                const res = await requestUpdatePostTypeInfo(json).catch(()=>"error")
                if("error"!==res){
                    console.log(res)
                    this.innerVisible=false
                    this.$message({
                        message: '薪资调整成功',
                        type: 'success'
                    });
                    this.getAllInfo()
                }
            },

            //查看详细
            handleEdit(index,row){
                this.dialogFormVisible=true
               this.form=this.tableData[index]
            },
            async getAllPostInfo(){
                const res = await requestGetAllPostInfo().catch(()=>"error")
                if("error"!==res){
                    console.log(res)
                    this.salaryData=res
                }
            },
            setSalaryFn(index,row){
                this.innerVisible=true
                this.form1=this.salaryData[index]
            },
            handleClose(){this.dialogVisible=false},
            async setSalary(){
                this.dialogVisible=true
                this.getAllPostInfo()
            },
            async getAllInfo(){
                let json={mark:2}
                const res = await requestGetAllUserInfoByMark(json).catch(()=>"error")
                if("error"!==res){
                    console.log(res)
                }
                //获取本月第一天0点时间
                let start = new Date()
                start.setDate(1);
                start.setHours(0);
                start.setSeconds(0);
                start.setMinutes(0);
                console.log(start.getTime())
                for(let i=0;i<res.length;i++){
                    let json2={
                        id:res[i].id,
                        registTime:parseInt(start.getTime()/1000),
                    }
                    let tmp=res[i]
                    const leaveTimes=await requestGetLeaveTimes(json2).catch(()=>"error")
                    const registTimes= await requestGetRegistTimes(json2).catch(()=>"error")
                    console.log(leaveTimes,registTimes)
                    let json3={postType:tmp.serve}
                    const res3=await requestGetSalaryByPostType(json3).catch(()=>"error")

                    if(leaveTimes!=="error"&&registTimes!=="error"){
                        tmp.leaveTimes=leaveTimes
                        tmp.registTimes=registTimes
                        if(tmp.registTimes>=26){
                            //每月基本工资加奖金
                            tmp.pay=res3.baseSalary+res3.bonus
                        }else if(tmp.registTimes>=16){
                            //每次请假扣100
                            tmp.pay=res3.baseSalary+res3.bonus-tmp.leaveTimes*100
                        }else if (tmp.registTimes>10){
                            //只有基本工资
                            tmp.pay=res3.baseSalary
                        }else{
                            //少于10天没有工资
                            tmp.pay=0
                        }
                        //更新用户薪资
                        let json4={pay:tmp.pay,id:tmp.id}
                        const res4=await requestUpdatePayById(json4).catch(()=>"error")
                        if("error"===res4){
                            this.$message({
                                message: '薪资计算错误',
                                type: 'warning'
                            });
                        }
                        tmp.genderInfo=tmp.sex==='1'?'男':'女'
                        tmp.time1=`${start.getFullYear()}年${start.getMonth()+1}月`
                        console.log(tmp)
                        this.tableData.push(tmp)
                    }
                }
            },
            handleSelectionChange(val) {
                console.log(this.multipleSelection)
                this.multipleSelection = val;
            },
        }
    };
</script>

<style scoped>
    .btn-base{
        margin-bottom: 10px;
    }
</style>